<template>
  <div id="editorID">
    <div ref="editor"></div>
  </div>
</template>
<script>

  export default {
    name: "editor",
    props:['dialoginfo'],
    data(){
      return{
      }
    },
    methods:{
      initEditor(){
        var E = window.wangEditor;//定义编辑器
        var editor = new E(this.$refs.editor)
        console.log(editor);
        editor.customConfig.uploadImgShowBase64 = true;
        editor.customConfig.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'list',  // 列表
          'justify',  // 对齐方式
          'image',  // 插入图片
          'table',  // 表格
          'undo',  // 撤销
          'redo'  // 重复
        ];
        editor.customConfig.onchange = (html) => {
          this.dialoginfo.data.content = html;
        }
        editor.create();
        editor.txt.html(this.dialoginfo.data.content);
      },
    },
    mounted(){
      //初始化编辑器
      this.initEditor();
    }
  }
</script>

<style scoped>
  #editorID>>>.w-e-toolbar{
    flex-wrap:wrap!important;
  }
  #editorID>>>.w-e-text-container {
    height: 240px !important;
  }
</style>
